<template>
  <view class="person-right">
    <view class="author-info person-item">
      <image
        class="avatar"
        :src="this.baseURL + video.avatar"
        mode="aspectFill"
        @click="viewUserInfo"
        @error="handleAvatarError"
        :class="{ hidden: showAvatarError }"
      ></image>
      <i
        class="iconfont icon-arrow-right avatar"
        style="font-size: 50px; color: #fff"
        :class="{ hidden: !showAvatarError }"
      ></i>
      <view class="follow-btn" v-if="!followed" @click="followUser">+</view>
      <view
        class="follow-btn follow-btn-unfollowed"
        v-else
        @click="unfollowUser"
      >
        <uni-icons type="checkbox-filled" size="20" color="#fff" />
      </view>
    </view>
    <view class="action-item like-btn" @click="toggleLike">
      <i class="iconfont icon-like icon-box" :style="{ color: likeColor }"></i>
      <text class="action-count">{{ video.likeCount || 0 }}</text>
    </view>

    <view class="action-item comment-btn" @click="toggleComment">
      <i
        class="iconfont icon-comment icon-box"
        :style="{ color: commentColor }"
      ></i>
      <text class="action-count">{{ video.commentCount || 0 }}</text>
    </view>

    <view class="action-item collect-btn" @click="toggleCollect">
      <i
        class="iconfont icon-collect icon-box"
        :style="{ color: collectColor }"
      ></i>
      <text class="action-count">{{ video.collectCount || 0 }}</text>
    </view>

    <view class="action-item share-btn">
      <i class="iconfont icon-share icon-box" :style="{ color: '#ffffff' }"></i>
      <text class="action-count" @click="toggleShare">
        {{ video.shareCount || 0 }}</text
      >
    </view>
    <view class="music-cover">
      <i
        class="iconfont icon-music_record icon-box icon-box-music"
        :style="{ color: '#ffffff' }"
      ></i>
    </view>
  </view>
</template>

<script>
  import { personalUserPage } from "@/API/pageConst";
  import storage from "@/utils/storage";

  export default {
    name: "person-right",
    components: {},
    props: {
      video: {
        type: Object,
        default: () => ({
          userId: "",
          avatar: "",
          likeCount: 0,
          commentCount: 0,
          collectCount: 0,
          musicCover: "",
        }),
      },
    },
    data() {
      return {
        likeColor: "#ffffff",
        collectColor: "#ffffff",
        commentColor: "#ffffff",
        followed: false,
        unwatch: null,
        showAvatarError: false,
      };
    },
    computed: {
      follow_key() {
        const currentUserId = "1";
        return `${currentUserId}:${this.video.userId}:followed`;
      },
    },
    mounted() {
      this.initFollowedStatus();
      // 监听存储变化
      this.unwatch = storage.watch(this.follow_key, (newValue) => {
        this.followed = newValue === true || newValue === "true";
      });

      // test ss
      // if (this.video.id === 1) {
      //   this.$emit("comment-click", this.video.id);
      // }
    },
    beforeUmmount() {
      if (this.unwatch) {
        this.unwatch();
      }
    },
    methods: {
      handleAvatarError() {
        this.showAvatarError = true;
      },
      initFollowedStatus() {
        // 从 后台/api/xx 获取这个状态
        // 现在从本地缓存中获取
        // const followed = uni.getStorageSync(follow_key);
        const followed = storage.get(this.follow_key);
        this.followed = followed === true || followed === "true";
      },
      viewUserInfo() {
        uni.navigateTo({
          url: `${personalUserPage}?videoUserId=${this.video.userId}`,
        });
      },
      followUser() {
        storage.set(this.follow_key, true);
        this.followed = true;
      },
      unfollowUser() {
        storage.set(this.follow_key, false);
        this.followed = false;
      },
      toggleLike() {
        if (this.likeColor === "#ffffff") {
          this.likeColor = "#ff2442";
          this.video.likeCount = this.video.likeCount + 1;
        } else {
          this.likeColor = "#ffffff";
          this.video.likeCount = this.video.likeCount - 1;
        }
      },
      toggleComment() {
        this.$emit("comment-click", this.video.id);
      },
      toggleCollect() {
        if (this.collectColor === "#ffffff") {
          this.collectColor = "#ff2442";
          this.video.collectCount = this.video.collectCount + 1;
        } else {
          this.collectColor = "#ffffff";
          this.video.collectCount = this.video.collectCount - 1;
        }
      },
      toggleShare() {},
    },
  };
</script>

<style>
  .icon-box {
    width: 30px;
    height: 30px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon-box-music {
    font-size: 50px;
    width: 50px;
    height: 50px;
  }
  .person-right {
    position: fixed;
    right: 10px;
    bottom: 100px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .follow-btn {
    width: 20px;
    height: 20px;
    margin-top: -5px;
    background-color: #ff2442;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    z-index: 10;
  }
  .follow-btn-unfollowed {
    background-color: #000;
    color: #fff;
  }
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .action-icon {
    width: 40px;
    height: 40px;
  }

  .action-count {
    color: #fff;
    font-size: 12px;
    margin-top: 5px;
  }

  .music-cover {
    width: 50px;
    height: 50px;
    overflow: hidden;
    align-items: center;
    margin-bottom: 5px;
    animation: rotate 2s linear 0.2s infinite;
  }

  .hidden {
    display: none;
  }
  .cover-img {
    width: 100%;
    height: 100%;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
